<template>
  <div class=".app-container">
    <el-row style="margin-top: 20px; margin-left: 20px">
      <el-col :span="24">
        <el-button type="primary" @click.native="insertType">新增类型</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px; margin-left: 20px">
      <el-col :span="24">
        <el-table v-loading="loading" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" border>
          <el-table-column type="selection" width="50" prop="id" align="center" />
          <el-table-column prop="typeName" label="类型名称" align="center" />
          <el-table-column prop="description" label="类型描述" align="center" />
          <el-table-column prop="createTime" label="创建时间" align="center" />
          <el-table-column prop="createBy" label="创建人" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click.native="updateType(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click.native="deleteType(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 表格下方放置一个分页组件，并使其水平居中 -->
        <el-row type="flex" justify="center" style="margin-top: 20px">
          <el-col :span="12">
            <!-- 根据需要调整 span 值 -->
            <el-pagination
              :current-page="page"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              prev-text="上一页"
              next-text="下一页"
              style="text-align: center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 新增类型弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="oaProcessTypeFrom" :rules="rules" label-width="80px" :model="oaProcessTypeFrom">
        <el-form-item label="类型名称" prop="typeName">
          <el-input v-model="oaProcessTypeFrom.typeName" />
        </el-form-item>
        <el-form-item label="类型描述" prop="description">
          <el-input v-model="oaProcessTypeFrom.description" />
        </el-form-item>
        <el-form-item>
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { list, insert, deleteById, updateById } from '@/api/oaProcessType'
  export default {
    data() {
      return {
        loading: false,
        title: '',
        dialogVisible: false,
        page: 1,
        pageSize: 10,
        total: 0,
        tableData: [],
        oaProcessTypeFrom: {
          id: null,
          typeName: '',
          description: '',
          createTime: '',
          createBy: '',
          updateTime: '',
          updateBy: '',
          isDeleted: ''
        },
        rules: {
          typeName: [
            { required: true, message: '类型名称不能为空', trigger: 'blur' },
            {
              min: 2,
              max: 10,
              message: '长度在 2 到 10 个字符',
              trigger: 'blur'
            }
          ],
          description: [{ required: true, message: '类型描述不能为空', trigger: 'blur' }]
        }
      }
    },
    created() {
      this.list()
    },
    methods: {
      /**
       * 获取列表数据
       */
      async list() {
        const resault = await list(this.page, this.pageSize, {})
        this.total = resault.total
        this.tableData = resault.list
      },
      submitForm() {
        this.$refs.oaProcessTypeFrom.validate(async isOk => {
          if (isOk) {
            if (this.oaProcessTypeFrom.id) {
              await updateById(this.oaProcessTypeFrom)
            } else {
              await insert(this.oaProcessTypeFrom)
            }
            // 刷新列表
            await this.list()
            // 清空数据
            this.$refs.oaProcessTypeFrom.resetFields()
            // 关闭弹窗
            this.dialogVisible = false
            this.$message.success('添加审批类型成功')
          } else {
            return false
          }
        })
      },
      /**
       * 编辑按钮回显数据
       */
      updateType(row) {
        this.title = '修改类型'
        this.dialogVisible = true
        this.oaProcessTypeFrom = row
      },
      /**
       * 删除类型
       */
      deleteType(id) {
        this.$confirm('此操作将永久删除该类型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await deleteById(id)
            this.$message.success('删除成功')
            this.list()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      close() {
        this.resetForm()
      },
      /**
       * 页码数发生变化
       */
      handleCurrentChange(page) {
        // console.log('@current-change=handleCurrentChange执行,当前页发生变化,当前是第：' + page + '页')
        this.page = page
        this.list()
      },
      /**
       * 每页显示条数发生变化执行
       */
      handleSizeChange(pageSize) {
        // console.log('@size-change=handleSizeChange执行,每页显示的条数发生变化,当前页显示的条数：' + pageSize + '条')
        this.pageSize = pageSize
        this.list()
      },
      insertType() {
        this.title = '新增类型'
        this.dialogVisible = true
        this.oaProcessTypeFrom = {}
      },
      /**
       * 点击x号，关闭弹窗
       * @param done
       */
      handleClose() {
        // 重置表单内容
        this.resetForm()
        this.loading = false
      },
      resetForm() {
        this.$refs.oaProcessTypeFrom = {}
        this.dialogVisible = false
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      }
    }
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
